<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
  <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />

    <link href="../assets/css/select2.min.css" rel="stylesheet" >
    <link href="../assets/css/checkbox3.min.css" rel="stylesheet" >
    <!-- Custom Styles-->
    <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/img.css">
</head>
<body>


<!--/. NAV TOP  -->

<div id="page-wrapper" >
    <br /><br /><br />
   <div style="margin-left:-3%;">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group" style="margin-left: 3%;">
                <label for="exampleInputName2">选择接收人角色:</label>
                <select class="selectbox" id="roleId">
	                <option value="AK">请选择</option>
	               	<c:forEach items="${roleList }" var="role">
	               		 <option value="${role.roleId }">${role.roleName }</option>
	               	</c:forEach>
	        </select>
            </div>
           <div class="form-group" style="margin-left: 1%;">
                <label for="exampleInputName2" >选择接收人:</label>
                <select class="selectbox" id="userId">
	                <option value="AK">请选择</option>
	                
	        </select>
            </div>
         <a href="#" class="btn btn-success" onclick="apply()">申请</a>
        <a href="#" class="btn btn-warning example">查看示例</a>
        </form>
    </div>
    </div>

    <div class="header">
        <h1 class="page-header" style="text-align: center">
            公务交通 <small>（员工个人）</small>
        </h1>

    </div>


    <!-- <div id="page-inner"> -->
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">基本信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Basic Table
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table">
										<c:forEach items="${listdetails }" var="details">
                                            <tr>
                                                <td style="text-align: right;">
                                                    	报账人：
                                                </td>
                                                <td>
                                                 ${details.userName }
                                                </td>

                                                <td style="text-align: right;">
                                                    	报账单位名称：
                                                </td>
                                                <td>${details.departmentName }</td>
                                                <td style="text-align: right;">报账人电话：</td>
                                                <td>
                                                    ${details.phone }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    	预算指标：
                                                </td>
                                                <td>
                                                  	  差旅费
                                                </td>

                                                <td style="text-align: right;">
                                                    	报账时间：
                                                </td>
                                                <td id="reDate">${details.reimbursementTime }</td>
                                                <td style="text-align: right;">费用发生日：</td>
                                                <td id="invoiceTime">${details.invoiceTime }</td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                  	  报账单号：
                                                </td>
                                                <td id="reimbursementId">${details.reimbursementId }</td>

                                                <td style="text-align: right;">
                                                    	公司代码：
                                                </td>
                                                <td>
                                                     ${details.companyid }
                                                </td>
                                                <td style="text-align: right;">发票类型：</td>
                                                <td style="display: none" id="invoiceTypeId">${details.invoiceTypeId }</td>
                                                <td>${details.invoiceTypeName }</td>
                                            </tr>
                                            <tr >
                                                <td style="text-align: right;">
                                                   	 附单据张数：
                                                </td>
                                                <td>
                                                   ${details.reimbursementNumber }
                                                </td>
                                                <td style="text-align: right;">
                                                    	是否员工代垫：
                                                </td>
                                                <td>
                                                     ${details.isAdvance }
                                                </td>
                                                <td style="text-align: right;">
                                                    	是否个人专项：
                                                </td>
                                                <td>
                                                    ${details.isSingle }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                   	 报账说明：
                                                </td>
                                                <td colspan="5">
                                                    ${details.reimbursementExplain }
                                                </td>
                                            </tr>
                                            </c:forEach>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">差旅明细</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Kitchen Sink
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>补单理由</th>
                                                <th>详细说明</th>
                                                <th>补单张数</th>
                                                <th>补单发起时间</th>
												<th>补单金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td style="text-align: center">
                                                    <input type="text" class="form-control"  placeholder="补单理由">
                                                </td>
                                                <td style="text-align: center">
                                                    <input type="text" class="form-control"  placeholder="详细说明">
                                                </td>
                                                <td style="text-align: center">
                                                    <input type="text" class="form-control"  placeholder="补单张数">
                                                </td>
                                                <td style="text-align: center">
                                                    <input type="date" class="form-control" id="singleDate" placeholder="补单发起时间">
                                                </td>
												 <td style="text-align: center">
                                                    <input type="text" class="form-control" placeholder="补单金额">
                                                </td>       
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <!--选项卡-->
                            <div class="panel panel-default">
                                
                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li class=""><a href="#home" data-toggle="tab" aria-expanded="false">内部人信息</a>
                                        </li>
                                        <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">报账单影像</a>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="home">


                                            <!--表格-->
                                            <div class="panel panel-default">
                                                <!--   <div class="panel-heading">
                                                       Bordered Table
                                                   </div>-->

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive table-bordered">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>收款人</th>
                                                                <th>所属部门</th>
                                                                <th>员工编号</th>
                                                                <th>收款类型</th>
                                                                <th>公司名称</th>
                                                                <th>开户行</th>
                                                                <th>银行账号</th>
                                                             
                                                                <th>金额</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <c:forEach items="${listOtherInformation }" var="otherInformation">
                                                           <tr>
                                                                <td>1</td>
                                                                <td>
                                                                   ${otherInformation.userName }

                                                                </td>

                                                                <td>
                                                                   ${otherInformation.departmentName }

                                                                </td>
                                                                <td>
                                                                    ${otherInformation.userId }

                                                                </td>
                                                                <td>
                                                                   ${otherInformation.receivablesType }

                                                                </td>
                                                                <td>
                                                                  ${otherInformation.companyName }

                                                                </td>
                                                                <td>
                                                                   ${otherInformation.bankName }

                                                                </td>
                                                                <td>
                                                                   ${otherInformation.bankNumber }

                                                                </td>
                                                               
                                                                <td>
                                                                  ${otherInformation.reimbursementMoney }

                                                                </td>

                                                            </tr>
                                                           
                                                           
                                                           </c:forEach> 
                                                            

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                                作者：1049794100@qq.com
                                                时间：2018-01-04
                                                描述：表格
                                            -->
                                        </div>
                                        <div class="tab-pane fade active in" id="profile">
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                                <div class="layui-upload-list">
                                                    <table class="layui-table">
                                                        <thead>
                                                        <th>文件名</th>
                                                        <th>大小</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                        </thead>
                                                        <tbody id="demoList"></tbody>
                                                    </table>
                                                </div>
                                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                    预览图：
                                                    <div class="layui-upload-list" id="demo2"></div>
                                                </blockquote>
                                                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<!-- /. PAGE INNER  -->

<!-- /. PAGE WRAPPER  -->

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<script src="../assets/js/select2.full.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".selectbox").select2();
    });

</script>
<!-- Custom Js -->
<script src="../assets/js/custom-scripts.js"></script>
<script type="text/javascript">
		$("#roleId").on("change",function(){
			var roleId = this.value;//当前的角色id
			console.log(roleId);
			console.log("11111");
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/travelApplication/listUserNameAll.do",
				dataType:"json",
				data:{"roleId":roleId},
				success:function(data){
					console.log("成功了");
					if(data == null || data == ""){
						console.log("没数据");
						$("#userId").children().remove();
					}else {
						var str = "";
						$("#userId").children().remove();
						$.each(data,function(key,val){
							str += '<option value='+ val.userId +'>'+val.userName+'</option>';
							console.log(key);
							console.log("-----");
							console.log(val);
						});
						$("#userId").append(str);
					}
				},
				error:function(data){
					console.log(data);
				}
			});
		});
		
		 //查看示例
	    layui.use('layer', function(){
	        var layer = layui.layer;
	    });
	    $('.example').on('click', function(){
	        layer.open({
	            type: 2,
	            title: '公务交通示例',
	            maxmin: true,
	            shadeClose: false, //点击遮罩关闭层
	            area : ['80%' , '80%'],
	            content: ['${pageContext.request.contextPath}/chooseApplication/apply.do?reimbursementName=officialTraffic','yes']
	        });
	    });
	    //点击申请，增加补单信息
		   
	    function apply(){
	    	var reimbursementId = $("#reimbursementId").text();
	    	var userId = parseInt($('#userId option:selected').val());//用户id
	    	var supplementReason = $("#exampleInputName1").val(); //补单理由
            var invoiceIdExplain = $("#exampleInputName2").val(); //详细说明
           	var invoiceNumber = parseInt($("#exampleInputName3").val()); // 补单张数
           	var supplementTime = $("#exampleInputName4").val(); // 补单发起时间
			var invoiceMoney = parseInt($("#exampleInputName5").val()); //补单金额
			console.log(supplementReason);
			console.log(invoiceIdExplain);
			console.log(invoiceNumber);
			console.log(supplementTime);
			console.log(invoiceMoney);
			console.log(reimbursementId);
			console.log(typeof supplementTime);
			var InsertSuppJSON = {
					"reimbursementId":reimbursementId,
					"supplementReason":supplementReason,
					"userId":userId,
					"invoiceIdExplain":invoiceIdExplain,
					"invoiceNumber":invoiceNumber,
					"supplementTime":supplementTime,
					"invoiceMoney":invoiceMoney,
			};
			 $.ajax({
					url:"../declarationInformation/insertsupplementMs.do",
					type:"POST",
					contentType:'application/json;charset=UTF-8',//关键是要加上这行
			        //traditional:true,//这使json格式的字符不会被转码
			        dataType:"json",
			        async:true,
			        data:JSON.stringify(InsertSuppJSON),//把json对象转为字符串传递给后台
					success:function(data){
						$("#search");//搜索
						var str=""; 
						if(data == null){
							layer.msg("未申请成功！请重新申请！");
						}
						layer.msg("申请成功！！！");
					},
					error:function(data){
						layer.msg("未申请成功！请重新申请！");
						
					},
			});
			
			
	    }
	</script>
	<script>
	 /* 上传文件 */
	 /* $("#exampleInputName5").on("blur",function(){ */
     //文件上传
	 layui.use('upload', function(){
       var $ = layui.jquery
       ,upload = layui.upload;
       //多文件列表示例
       var demoListView = $('#demoList'),
               uploadListIns = upload.render({
                   elem: '#testList' //绑定元素
                   ,url: '${pageContext.request.contextPath}/upload/uploadFile.do' //上传路径
                   ,method: 'post'
                   ,accept: 'file' //指定允许上传的文件类型，可选有：images（图片）、file（所有文件）、video（视频）、audio（音频）
                   ,size: 51200 //最大允许上传文件大小  kb
                   ,multiple: true //是否支持多文件上传
                   ,auto: false //文件选择后是否自动上传
                   ,number: 50 //最多文件上传数为5
                   ,bindAction: '#testListAction' //指定上传按钮
                   ,before: function(input){
                	   var data =  {"invoiceTime":$('#invoiceTime').text(),
                          	"invoiceTypeId":$('#invoiceTypeId').text(),
                          	"reimbursementId":$('#reimbursementId').text()};
                	   this.data = data;
                   }
                   ,choose: function(obj){//选择文件后回调函数
                       var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                       //读取本地文件
                       obj.preview(function(index, file, result){
                           var tr = $(['<tr id="upload-'+ index +'">'
                               ,'<td>'+ file.name +'</td>'
                               ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                               ,'<td>等待上传</td>'
                               ,'<td>'
                               ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                               ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                               ,'</td>'
                               ,'</tr>'].join(''));


                          //图片预览
                           $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="yulanimg" id="img-'+ index +'">')

                           //单个重传
                           tr.find('.demo-reload').on('click', function(){
                               obj.upload(index, file);
                           });

                           //删除
                           tr.find('.demo-delete').on('click', function(){
                               delete files[index]; //删除对应的文件
                               tr.remove();
                               console.log(index);
                               var str ='#img-'+index;
                               //console.log(str);
                               $(str).remove()
                               uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                           });

                           demoListView.append(tr);
                       });
                   }
                   ,allDone: function(obj){//文件全部提交后，触发
                   	console.log("Time:"+$("#invoiceTime").val());
                   	console.log("makeId"+$("#makeId").val());
                   	console.log(obj.total); //得到总文件数
          			 	console.log(obj.successful); //请求成功的文件数
          			 	console.log(obj.aborted); //请求失败的文件数
                   }
                   ,done: function(res, index, upload){
                       if(res.code == 0){ //上传成功
                           var tr = demoListView.find('tr#upload-'+ index)
                                   ,tds = tr.children();
                           tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                           tds.eq(3).html(''); //清空操作
                           return delete this.files[index]; //删除文件队列已经上传成功的文件
                       }
                       this.error(index, upload);
                   }
                   ,error: function(index, upload){
                       var tr = demoListView.find('tr#upload-'+ index)
                               ,tds = tr.children();
                       tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                       tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                   }
               });
	    });
	 
	 
	 
	 $("#singleDate").blur(function(){
		   var singleDate = $("#singleDate").val();
		   //alert(singleDate);
		   var reDate = $("#reDate").text();
		   //alert(reDate);
		  if(singleDate < reDate){
			  layer.msg("补单时间大于申报时间，请重新填写!");
			  $("#singleDate").val("")
		  }
	   });
	</script>



</body>
</html>
